<template>
    <el-row type="flex" class="main" align="middle" justify="center">
      <div class="form-wrapper">
        <el-row type="flex" class="row-bg" justify="center">
          <span
            :class="{ active: currentTab == index }"
            v-for="(item, index) in ['登录', '注册']"
            :key="index"
            @click="changeTab(index)"
          >{{ item }}</span>
        </el-row>
        <LoginForm @DialogClose="DialogClose" v-if="currentTab == 0" :url="oldUrl" />
        <RegisterForm v-else @currentTab="currentTab = 0" :url="oldUrl" />
      </div>
    </el-row>
</template>
<script>
import LoginForm from '@/components/user/LoginForm'
import RegisterForm from '@/components/user/RegisterForm'
export default {
  components: {
    LoginForm,
    RegisterForm,
  },
  data() {
    return {
      currentTab: 0,
      oldUrl: '',
    }
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.oldUrl = from
    })
  },
  methods: {
    changeTab(index) {
      this.currentTab = index
    },
    DialogClose(){
      this.$emit('DialogClose')
    }
  },
}
</script>
<style lang="less" scoped>
.main {
  width: 100%!important;
  height: 100%;
  margin: 0 auto;
  position: relative;
  .form-wrapper {
    width: 400px;
    margin: 0 auto;
    background: #fff;
    // box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
    border:1px solid #ddd;
    overflow: hidden;
    span {
      flex: 1;
      height: 50px;
      line-height: 48px;
      text-align: center;
      font-weight: 800;
      cursor: pointer;
      color: #666;
      font-size: 18px;
      background: #eee;
      border-top: 2px #eee solid;

      &.active {
        border-top: 2px solid orange;
        color: orange;
        background: #fff;
      }
    }
  }
}
</style>